<template>
	<div class="main-content">
		<div class="row">
			<div class="col-sm-4 col-md-3">
				<ul class="template-title-fl">
					<li><button @click="modalOpen" type="button" class="btn btn-default btn-theme addBtn">弹出</button></li>
				</ul>
			</div>

			<div class="modal-dialog" v-show="modalShow">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" @click="modalClose"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h4 class="modal-title" id="myModalLabel">新增部门</h4>
					</div>
					<div class="modal-body">
						<div class="form-horizontal">
							<form id="userForm">
							<div class="form-group">
								<label for="" class="col-sm-4 control-label">新增部门：</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" placeholder="请输入部门" name="deptName">
								</div>
							</div>
							</form>
							<div class="form-group">
								<label for="" class="col-sm-4 control-label">上级部门：</label>
								<div class="col-sm-8">
									<select class="form-control">
										<option>请选择</option>
										<option>1</option>
										<option>2</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="" class="col-sm-4 control-label">新增部门：</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" placeholder="请输入部门">
								</div>
							</div>
							<div class="form-group">
								<label for="" class="col-sm-4 control-label">部门编号：</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" placeholder="请输入部门编号">
								</div>
							</div>
							<div class="form-group">
								<label for="" class="col-sm-4 control-label">备注：</label>
								<div class="col-sm-8">
									<textarea class="form-control" rows="3" placeholder="备注"></textarea>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" @click="modalClose">取消</button>
						<button type="button" class="btn checkedBtn" @click="validator" >确定</button>
					</div>
				</div>
			</div>

		</div>

	</div>
</template>

<script>
    $(document).ready(function() {
    	/*$('#userForm').bootstrapValidator({
						message: 'This value is not valid',
			            feedbackIcons: {
			                valid: 'glyphicon glyphicon-ok',
			                invalid: 'glyphicon glyphicon-remove',
			                validating: 'glyphicon glyphicon-refresh'
			            },
			            fields: {
			            	deptName: {
			                    validators: {
			                        notEmpty: {
			                            message: '部门不能为空'
			                        }
			                    }
			                }
			            }
		});*/
    })
	export default {
		data() {
				return {
					modalShow: false
				}
			},
			mounted: function() {
			   this.initValidator();
		    },
			methods: {
				modalOpen() {
					this.modalShow = true;
				},
				modalClose() {
					this.modalShow = false;
				},
				validator(){
					/*$('#userForm').bootstrapValidator('validate');
	                var isValid=$('#userForm').data('bootstrapValidator').isValid();*/
				},
				initValidator(){
/*					$('#userForm').bootstrapValidator({
						message: 'This value is not valid',
			            feedbackIcons: {
			                valid: 'glyphicon glyphicon-ok',
			                invalid: 'glyphicon glyphicon-remove',
			                validating: 'glyphicon glyphicon-refresh'
			            },
			            fields: {
			            	deptName: {
			                    validators: {
			                        notEmpty: {
			                            message: '部门不能为空'
			                        }
			                    }
			                }
			            }
					});*/
				}
			}
	}
</script>